<style scoped lang="less">
	.box {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	
		.title {
			font-size: 20px;
		}
	}
	.common-layout {
		background: #f2f3f5;
	
		.el-header {
			padding: 0 !important;
			height: 10vh;
		}
	
		.el-main {
			height: 86vh;
			padding: 0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.dialogBox{
				div{
					margin-top: 20px;
				}
			}
		}
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
		}
		.el-main{
			height: 86vh;
			padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	#searchItem{
		width: 435px;
		height: 30px;
		// border:1px solid red;
		line-height: 30px;
		display: flex;
		justify-content: space-between;
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
	:deep(.el-table th){
		background: #f7f8fa;
	}
</style>
<template>

	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <div class="box">
				 <div v-if="flag">
				 	<el-row justify="space-between" style="margin-bottom: 20px;">
				 		<el-col :span="4"><h3>菜单设置</h3></el-col>
				 		<el-button type="primary" plain @click="addMenu">添加菜单</el-button>
				 	</el-row>
					<div id="searchItem" >
						<span style="color:#000000;">菜单名称</span>
						<el-input placeholder="请输入菜单名称" style="width: 200px;" v-model="searchTarget"></el-input>
						<el-button type="primary" @click="search">搜索</el-button>
						<el-button @click="reset">重置</el-button>
					</div>
				 	<el-table :data="menuList" style="margin-top: 20px;" height="53vh">
				 		<el-table-column label="菜单名称" prop="menuName" width="200px"></el-table-column>
						<el-table-column label="标识" prop="menuType"></el-table-column>
				 		<el-table-column label="菜单地址" prop="menuPath"></el-table-column>
				 		<el-table-column label="操作">
				 			<template #default='scope'>
				 				<span class="mya" @click="updateMenuFn(scope.row)">编辑</span>
				 				<span class="mya" @click="delMenuFn(scope.row)">删除</span>
				 			</template>
				 		</el-table-column>
				 	</el-table>
				 	<el-pagination
				 		layout="prev,pager,next"
				 		:page-count="total"
				 		:page-size="pageSize"
				 		v-model:current-page="pageIndex"	
				 		@current-change="changePage"
				 	></el-pagination>
				 	
				 	<el-dialog
				 	   v-model="dialogVisibledelate"
				 	   title="提示"
				 	   width="500"
				 	 >
				 	 <div style="text-align: center;"><span>确定要删除该菜单吗？</span></div>
				 	   <template #footer>
				 	     <div class="dialog-footer">
				 	       <el-button @click="dialogVisibledelate = false">取消</el-button>
				 	       <el-button type="primary" @click="define">
				 	         确定
				 	       </el-button>
				 	     </div>
				 	   </template>
				 	</el-dialog>
				 </div>
				 <AddMenu @update-message="handleMessageUpdate" v-else></AddMenu>	
			 </div>
			
		</el-main>
	   </el-container>
	 </div>
</template>

<script setup>
	import { ElRow,ElCol,ElButton,ElTable,ElTableColumn,ElPagination,ElMessage } from 'element-plus';
	import { onMounted, ref } from 'vue';
	import {getMenuList,delMenu,searchMenu} from "@/api"
	import { useRouter } from 'vue-router';
	import AddMenu from './AddMenu.vue';
	import Header from "@/components/Header.vue"
	let flag=ref(true)
	let menuList=ref([])
	let pageIndex=ref(1);
	let pageSize=7;
	let total=ref(0)
	
	// 返回
	function handleMessageUpdate () {
		flag.value = true;
		getMenu()
	}
	
	const getMenu=async ()=>{
		let res=await getMenuList({
			pageIndex:pageIndex.value,
			pageSize:pageSize
		})
		//console.log('menuSetting',res)
		menuList.value=res.menuList
		total.value=res.pageCount
		searchTarget.value=""
	}
	//获取分页
	let router=useRouter()
	const addMenu=()=>{
		sessionStorage.removeItem("itemMenu")
		// router.push("/setting/AddMenu")
		flag.value=false
	}
	
	//修改菜单
	const updateMenuFn=(item)=>{
		//console.log(item)
		sessionStorage.setItem("itemMenu",JSON.stringify(item))
		// router.push("/setting/AddMenu")
		flag.value=false
	}
	//删除菜单
	const dialogVisibledelate=ref(false)
	const delMenuFn=async (item)=>{
		dialogVisibledelate.value=true
		sessionStorage.setItem("menuId",item.menuId)
	}
	//删除确定
	const define= async()=>{
		dialogVisibledelate.value=false
		let data={
			menuId:Number(sessionStorage.getItem("menuId"))
		}
		let res=await delMenu(data)
		
		ElMessage({
		    message:"删除成功",
		    type: 'success',
		})
		getMenu()
	}
	
	
	//点击分页器
	const changePage=(page)=>{
		//console.log(page)
		pageIndex.value=page;
		search()
	}
	onMounted(()=>{
		getMenu()
	})
	//搜索
	let searchTarget=ref("")
	const search = async() =>{
		// console.log(searchTarget.value)
		let res = await searchMenu({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			menuName:searchTarget.value
		})
		//console.log(res)
		menuList.value=res.menuList
		total.value=res.pageCount
		// console.log(total.value)
	}
	
	//重置按钮
	const reset = ()=>{
		searchTarget.value=""
		getMenu()
	}
</script>

